<template>
  <div class="memberInfo">
    <div class="card">
      <div class="avatar">
        <img :src="memberInfo.photo" alt="">
      </div>
      <div class="name">{{memberInfo.name}}</div>
      <ul class="info">
        <li>
          <p class="label">性别</p>
          <p class="value">{{memberInfo.sex==1?'男':'女'}}</p>
        </li>
        <li>
          <p class="label">党内职务</p>
          <p class="value">{{memberInfo.party_posts}}</p>
        </li>
        <li>
          <p class="label">籍贯</p>
          <p class="value">{{memberInfo.native_place}}</p>
        </li>
        <li>
          <p class="label">学历</p>
          <p class="value">{{memberInfo.edu|edu}}</p>
        </li>
        <li>
          <p class="label">入党时间</p>
          <p class="value">{{memberInfo.party_time|time}}</p>
        </li>
        <li>
          <p class="label">组织关系所在地</p>
          <p class="value">{{memberInfo.address}}</p>
        </li>
        <li>
          <p class="label">状态</p>
          <p class="value">{{memberInfo.party_status|party_status}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        memberInfo:{}
      }
    },
    filters:{
      edu(value){
    　　return ['小学','初中','高中','专科','本科','硕士研究生','博士研究生'][value-1]||''
      },
      party_status(value){
    　　return ['在职', '流动', '挂靠', '离职', '预备党员', '积极分子'][value-1]||''
      }
    },
    created() {
      this.getMemberInfo(this.$route.query.id)
    },
    methods: {
      getMemberInfo(id){
        const url = `app/Party/party_info`
        let params = {
          party_id: id
        }
        this.$http.get(url, params).then(res=>{
          this.memberInfo = res.data[0]
        })
      },
    },
    components: {

    }
  }
</script>

<style lang="scss" scoped>
.memberInfo{
  min-height: 100vh;
  background: url(../../../../assets/img/memberInfo_bg.png) no-repeat;
  background-size: 100% 207px;
  box-sizing: border-box;
  padding-top: 110px;
  .card{
    box-sizing: border-box;
    padding-top: 52px;
    position: relative;
    width:340px;
    height:531px;
    background:rgba(255,255,255,1);
    box-shadow:3px 3px 10px 0px rgba(51,51,51,0.08);
    border-radius:6px;
    margin: 0 auto;
    .avatar{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -45px;
      width:76px;
      height:76px;
      background:rgba(244,244,244,1);
      border-radius:50%;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .name{
      font-size:17px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:17px;
      margin-bottom: 2px;
      text-align: center;
    }
    .info{
      box-sizing: border-box;
      padding: 0 15px;
      li{
        height: 65px;
        border-bottom: 1PX solid rgba(221,221,221,.5);;
        box-sizing: border-box;
        padding: 10px 7px;
        .label{
          font-size:12px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(153,153,153,1);
          line-height: 12px;
          margin-bottom: 10px;
        }
        .value{
          font-size:14px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(51,51,51,1);
          line-height: 14px;
        }
        &:last-of-type{
          border:0;
        }
      }
    }
  }
}
</style>
